<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列 - Columns</title>
    <link rel="stylesheet" href="../assets/normalize.css" />
    <link rel="stylesheet" href="../assets/bootstrap.min.css" />
    <link rel="stylesheet" href="../assets/common.css" />
  </head>
  <body>
    <h1 class="subject-title">
      学习如何使用我们的弹性盒子网格系统，通过一些选项来修改列的对齐、排序和偏移。另外，看看如何使用列类来管理非网格元素的宽度。
    </h1>

    <section class="section-area">
      <h1 class="area-title">垂直对齐</h1>
      <h2>使用任何响应式 align-items-* 类来更改垂直对齐方式。</h2>
      <div class="container mb-1 text-center" style="height: 100px">
        <div
          class="row h-100 align-items-start"
          style="background-color: rgb(165, 165, 165)"
        >
          <div class="col" style="background-color: lightcoral">
            One of three columns
          </div>
          <div class="col" style="background-color: lightblue">
            One of three columns
          </div>
          <div class="col" style="background-color: lightgreen">
            One of three columns
          </div>
        </div>
      </div>
      <div class="container mb-1 text-center" style="height: 100px">
        <div
          class="row h-100 align-items-center"
          style="background-color: rgb(165, 165, 165)"
        >
          <div class="col" style="background-color: lightcoral">
            One of three columns
          </div>
          <div class="col" style="background-color: lightblue">
            One of three columns
          </div>
          <div class="col" style="background-color: lightgreen">
            One of three columns
          </div>
        </div>
      </div>
      <div class="container mb-1 text-center" style="height: 100px">
        <div
          class="row h-100 align-items-end"
          style="background-color: rgb(165, 165, 165)"
        >
          <div class="col" style="background-color: lightcoral">
            One of three columns
          </div>
          <div class="col" style="background-color: lightblue">
            One of three columns
          </div>
          <div class="col" style="background-color: lightgreen">
            One of three columns
          </div>
        </div>
      </div>
      <div class="container mb-1 text-center" style="height: 100px">
        <div class="row h-100" style="background-color: rgb(165, 165, 165)">
          <div
            class="col align-self-start"
            style="background-color: lightcoral"
          >
            One of three columns
          </div>
          <div
            class="col aligns-self-center"
            style="background-color: lightblue"
          >
            One of three columns
          </div>
          <div class="col align-self-end" style="background-color: lightgreen">
            One of three columns
          </div>
        </div>
      </div>
    </section>

    <section class="section-area">
      <h1 class="area-title">水平对齐</h1>
      <h2>使用任何响应式 justiy-contents-* 类来更改水平对齐方式。</h2>
      <div class="container text-center">
        <div class="row justify-content-start">
          <div class="col-4" style="background-color: lightcoral">
            One of two columns
          </div>
          <div class="col-4" style="background-color: lightblue">
            One of two columns
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-4" style="background-color: lightgreen">
            One of two columns
          </div>
          <div class="col-4" style="background-color: lightyellow">
            One of two columns
          </div>
        </div>
        <div class="row justify-content-end">
          <div class="col-4" style="background-color: lightpink">
            One of two columns
          </div>
          <div class="col-4" style="background-color: lightgray">
            One of two columns
          </div>
        </div>
        <div class="row justify-content-around">
          <div class="col-4" style="background-color: lightblue">
            One of two columns
          </div>
          <div class="col-4" style="background-color: lightgreen">
            One of two columns
          </div>
        </div>
        <div class="row justify-content-between">
          <div class="col-4" style="background-color: lightcoral">
            One of two columns
          </div>
          <div class="col-4" style="background-color: lightyellow">
            One of two columns
          </div>
        </div>
        <div class="row justify-content-evenly">
          <div class="col-4" style="background-color: lightblue">
            One of two columns
          </div>
          <div class="col-4" style="background-color: lightgreen">
            One of two columns
          </div>
        </div>
      </div>
    </section>
  </body>
</html>
